<template>
  <div class="WorkList" runat="server">
    <el-container>
      <el-aside width="150px">
      </el-aside>
      <el-main>
        <span class="demonstration"><i>任务列表</i></span>
        <el-divider></el-divider>
        <el-table :data="workArr">
          <el-table-column type="index" label="编号"
                           width="50"></el-table-column>
          <el-table-column label="任务名" prop="workName" width="100"></el-table-column>
          <el-table-column label="任务信息"  prop="workInfo" width="150"></el-table-column>
          <el-table-column label="任务发布人" prop="userId" width="100"></el-table-column>
          <el-table-column label="志愿者" prop="volunteerId" width="100"></el-table-column>
          <el-table-column label="任务地点" prop="workAddress" width="100"></el-table-column>
          <el-table-column label="是否完成" prop="isFinish" width="100">
            <template scope="workArr">
              <el-tag :type="workArr.row.isFinish === 0 ? 'danger' : 'success'">
                {{workArr.row.isFinish==0?'未完成':'完成'}}
              </el-tag>
          </template>
          </el-table-column>
          <!--*******************************-->
        </el-table>

      </el-main>
    </el-container>
    <div class="block">
      <span class="demonstration"></span>
      <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="page"
          :page-size="10"
          layout="total, prev, pager, next"
          :total="total" align="center">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {setToken} from "@/utils/Token";
import {workList,WorkUser} from "@/api/admin_api";

export default {
  name: "work-list",
  data() {
    return {
      workArr: [],
      page:1,
      userId:'',
      volunteerId:'',
    }
  },
  created() {
   // setToken('token', 'eyJjdHkiOiJIUzI1NiIsInR5cCI6IkpXVCIsImFsZyI6IkhTMjU2In0.eyJuZXRJZCI6MSwiaWRlbnRpdHkiOjIsIm5ldFBhc3N3b3JkIjoiJDJhJDEwJHpvaW9Sc085WjBDL1g0b1JHSmxRSC5weTlQeGdXUDF1SEtrWEQ2OTF2UHJaQVM4LnBDb0NtIiwiY29tbXVuaXR5SWQiOjEsImV4cCI6MTY2NDM0NjAwNCwiYWNjb3VudCI6IjExMTFAcXEuY29tIn0.Zao1ELbFHJlhkmPgRjYIAATwPZPDNc1uyI0y-SSn3vI\n')
    workList(this.page).then((res) => {
      this.workArr = res.data.data.list;
      this.total = res.data.data.total;
      for(let i=0;i<this.workArr.length;i++){
        this.userId = this.workArr[i].userId;
        WorkUser(this.userId).then((res) => {
          this.workArr[i].userId = res.data.data.userName;
        });
        this.volunteerId = this.workArr[i].volunteerId;
        WorkUser(this.volunteerId).then((res) => {
          this.workArr[i].volunteerId = res.data.data.userName;
        });
      }
    })
  },

  methods: {
    //分页的方法
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val
      workList(this.page).then((res) => {
        this.workArr = res.data.data.list;
        this.total = res.data.data.total;
        for(let i=0;i<this.workArr.length;i++){
          this.userId = this.workArr[i].userId;
          WorkUser(this.userId).then((res) => {
            this.workArr[i].userId = res.data.data.userName;
          });
          this.volunteerId = this.workArr[i].volunteerId;
          WorkUser(this.volunteerId).then((res) => {
            this.workArr[i].volunteerId = res.data.data.userName;
          });
        }
      })
    }
  },
}
</script>
<style>
.WorkList .cell{
  white-space: pre-wrap !important;
}
</style>